import React, { Component } from 'react'
import Dialog from './Dialog'

export default class Mark extends Component {
    state = {
        flag: false,
        userInfo: {}
    }
    // 出现弹框
    setFlag = () => {
        this.setState({
            flag: true
        })
    } 
    // 传递给子组件的函数 ==> 用来修改flag   取消
    sendFn = (flag) => {
        this.setState({
            flag,
            
        })
    }

    // 传递给子组件的函数 ==> 用来修改flag 并且拿到输入的信息    确定
    sendFn2 = (flag, userInfo) => {
        this.setState({
            flag,
            userInfo
        })
    }
    render() {
        const { flag, userInfo } = this.state
        return (
            <div className = "h100">
                <div className = { userInfo.name? 'block': 'none' }>
                    <p>
                        我的姓名为：{ userInfo.name }
                    </p>
                    <p>
                        我的年龄为：{ userInfo.age }
                    </p>
                </div>

                <h3 onClick = {() => {
                    this.setFlag()
                }}>
                    点击打开Dialog
                </h3>
                {/* 通过数组添加多个类目 */}
                <div className = { [flag? 'block': 'none', 'h100'].join(' ') }>
                    <Dialog fn = { this.sendFn }  fn2 = { this.sendFn2 }/>
                </div>
            </div>
        )
    }
}
